<template>
  <div id="registe" class="registe">
    <div class="signup-wrap">
      <div class="signup">
        <h1>欢迎注册</h1>
        <div class="form">
          <div class="mailform">
            <div class="mail-adress">
              <input
                type="text"
                class="fl"
                v-model="account"
                placeholder="请输入账号"
                autocomplete="off"
                tabindex="1"
              >
            </div>
            <div class="passwd">
              <input type="password"  v-model="password" placeholder="请输入密码，6-16位字母、数字、符号的组合">
            </div>
            <div class="repasswd">
              <input type="password" v-model="repasswd" placeholder="请再次输入密码">
            </div>
          </div>
        </div>
        <div class="submit" @click="register">注册</div>
        <div class="three-account-wrap">
          <div class="goto-login fr">
            <p>
             已有账号？
              <router-link to="/login">直接登录</router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../api/axios";
export default {
  data() {
    return {
      account:null,
      password:null,
      repasswd:null,
      gotnumber: "",
      gotologin: ""
    };
  },
  methods:{
    register(){
      if(this.password != this.repasswd){
        this.$message.error('密码不一致！');
        return
      }
      axios.post("/user/register",{
          "account":this.account,
          "password":this.password
      }).then((resp)=>{
          if(resp.code == 0){
            this.$message.success(resp.msg)
            this.$router.push('/login')
          }else{
            this.$message.error(resp.msg)
          }
      })
    }
  }
};
</script>

<style scoped>
#registe {
  margin-top: 160px;
  margin-bottom: 50px;
  /* background-color: aqua; */
}

/* 注册框位置 */
.signup-wrap {
  width: 360px;
  height: auto;
  margin: 0 auto;
  padding: 0 80px;
  background-color: #fff;
}

/* 注册框 */
.signup {
  width: 100%;
  text-align: center;
}

/* 标题 */
.signup h1 {
  font-size: 24px;
  margin-bottom: 27px;
}

/* 其他方式注册 */
.signup-type {
  height: 12px;
  line-height: 12px;
  margin-bottom: 11px;
}
.signup-type a {
  display: block;
  color: #0076a4;
}
.signup-type a:hover {
  text-decoration: underline;
  outline: 0;
}
/* 文本框 */

.mail-adress,
.imglCode,
.passwd,
.repasswd {
  position: relative;
  height: 50px;
}
.imglCode,
.passwd,
.repasswd {
  margin-top: 20px;
}
.form input {
  padding-left: 14px;
  width: 348px;
  border-radius: 0;
}
.form input {
  height: 50px;
  line-height: 22px;
  font-size: 15px;
  background: none;
  outline: none;
  border: 1px solid #ddd;
}
.form input::-webkit-input-placeholder {
  color: #8a8a8a;
}
.form .imgCode,
.form .mailCode {
  width: 154px;
}
.form .passwd {
  width: 312px;
  padding-right: 32px;
}
.form input:focus {
  border: 2px solid #29a3d6;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}

/* 按钮 */
.submit {
  margin-top: 30px;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #29a3d6;
  text-decoration: none;
}
.submit:hover {
  background-color: #0076a4;
  cursor: pointer;
}

/* 其他登录方式 */
.three-account-wrap {
  height: 40px;
}
.three-account {
  height: 100%;
  width: 220px;
  display: inline;
}
.three-account .sina,
.three-account .tencent,
.three-account .wechat {
  margin-right: 8%;
  opacity: 0.7;
}
.three-account .sina img,
.three-account .tencent img,
.three-account .wechat img {
  height: 40px;
  width: 40px;
}
.three-account .sina:hover,
.three-account .tencent:hover,
.three-account .wechat:hover {
  opacity: 1;
  cursor: pointer;
}
.goto-login p {
  height: 22px;
  line-height: 22px;
  text-align: right;
  color: #777;
}
.goto-login p a {
  color: #0076a4;
}
.goto-login p a:hover {
  text-decoration: underline;
  outline: 0;
}
</style>
